import React from "react";
import { NavBar, Space, Toast, Button } from "antd-mobile";
import {CheckCircleOutline} from "antd-mobile-icons";

import { useNavigate, useLocation, useParams } from "react-router-dom";

type Props = {};

function XqYes({}: Props) {
  const navigate = useNavigate();
  const { state } = useLocation();
  const { id } = useParams();
  const back = () => {
    Toast.show({
      content: "点击了返回区域",
      duration: 1000,
    });
    navigate("/index/class");
  };
  return (
    <div
      style={{ background: "rgb(244 241 241)", width: "100%", height: "100%" }}
    >
      <div
        className="order-details"
        style={{
          width: "100%",
          height: "250px",
          margin: "0 auto",
          background: "rgb(27, 169, 186)",
          borderRadius: "0 0 15px 15px",
        }}
      >
        <div className="detailsTitle">
          <NavBar onBack={back} style={{ color: "white" }}>
            订单详情
          </NavBar>
        </div>

        
        <div className="detailsNav">
          <dl>
            <dd>
            <CheckCircleOutline />
            </dd>
            <dt>
              <h3>出票成功</h3>
              <p>您的订单因支付超时取消,可重新定购</p>
            </dt>
          </dl>
        </div>
      </div>

      <div
        className="order-forGoods"
        style={{
          width: "97%",
          height: "37%",
          zIndex: "999",
          position: "relative",
          top: "-110px",
          margin: "0 auto",
          borderRadius: "10px",
          background: "#ffffff",
        }}
      >
        <div
          className="order-forGoodsPadding"
          style={{ width: "94%", height: "98%", margin: "0 auto" }}
        >
          <div
            className="order-forGoodsName"
            style={{ padding: "15px 0px", color: "rgb(41 39 39)" }}
          >
            取票号：BW123455
          </div>
          <div
            className="order-forGoodsDate"
            style={{
              display: "flex",
              justifyContent: "space-between",
              color: "#ccc",
            }}
          >
            <div>06月15日周二</div>
            <div>06月15日周二</div>
          </div>
          <div
            className="order-forGoodsTime"
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: "10px",
              color: "black",
              fontSize: "25px",
              fontWeight: "600",
            }}
          >
            <div>06：24</div>
            <div>经停信息</div>
            <div>07：21</div>
          </div>
          <div
            className="order-forGoodslocation"
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: "10px",
              color: "rgb(41 39 39)",
            }}
          >
            <div>
              {state.city}
            </div>
            <div>G7740</div>
            <div>{state.citys}</div>
          </div>
          <div className="order-forGoodsInformation">
            <div
              className="order-forGoodsTitle"
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: "10px",
                color: "black",
                fontSize: "18px",
                fontWeight: "800",
              }}
            >
              <div>
                {state.name}
                <span
                  style={{
                    color: "#ccc",
                    border: "1px solid #ccc",
                    padding: "3px 3px",
                    fontSize: "12px",
                    marginLeft: "5px",
                  }}
                >
                  成人票
                </span>
              </div>
              <div>一等座￥{state.price}</div>
            </div>
            <div
              className="order-forGoodsCenter"
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: "10px",
                color: "#ccc",
              }}
            >
              <div>身份证 110102**********28</div>
              <div>
                <span
                  style={{
                    color: "green",
                    border: "1px solid green",
                    padding: "3px 3px",
                    fontSize: "12px",
                    marginRight: "5px",
                  }}
                >
                  靠窗
                </span>
                <span style={{ color: "#000" }}>  {state.railway}车厢{state.wagon}号</span>
              </div>
            </div>
            <div style={{ marginTop: "10px", color: "green" }}>出票成功</div>
          </div>
        </div>
      </div>
      <div
        className="order-No."
        style={{
          width: "97%",
          height: "15%",
          background: "#ffffff",
          margin: "0 auto",
          borderRadius: "10px",
          marginTop: "-95px",
        }}
      >
        <div
          className="order-No.Ti"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "20px 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>订单号</div>
          <div>E369941878</div>
        </div>
        <div
          className="order-No.Phone"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "0 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>通知手机</div>
          <div>188123456789</div>
        </div>
      </div>
      <div
        className="ADULT"
        style={{
          width: "97%",
          height: "15%",
          background: "#ffffff",
          margin: "0 auto",
          borderRadius: "10px",
          marginTop: "15px",
        }}
      >
        <div
          className="ADULT-vote"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "20px 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>成人票</div>
          <div>￥107x1</div>
        </div>
        <div
          className="order-amount"
          style={{
            display: "flex",
            justifyContent: "space-between",
            padding: "0 11px",
            color: "rgb(41 39 39)",
          }}
        >
          <div>订单总计</div>
          <div style={{ color: "orange", fontSize: "23px" }}>￥107</div>
        </div>
      </div>
     
    </div>
  );
}

export default XqYes;
